<template>
  <div style="margin-top: 20px">
    <div class="my-btn" >
      <a-button type="primary" @click="deployApplication">
        添加类别
      </a-button>
    </div>
    <a-table :columns="columns"
             :data-source="dataSource"
             :pagination="false"
             rowKey="id"
             bordered>
      <template
          v-for="col in ['name', 'standardNum', 'maxNum']"
          :slot="col"
          slot-scope="text, record"
      >
        <div :key="col">
          <a-input
              v-if="record.id == editingKey"
              style="width: 120px"
              :value="text"
              @change="e => handleChange(e.target.value, record.id, col)"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template slot="operation" slot-scope="text, record">
        <div class="editable-row-operations">
        <span v-if="record.id == editingKey">
          <a @click="() => save(record.id)">保存</a>
          <a-popconfirm title="确认取消?" @confirm="() => cancel(record.id)">
            <a>取消</a>
          </a-popconfirm>
        </span>
          <span v-else>
          <a :disabled="editingKey !== ''" @click="() => edit(record.id)">修改</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确认删除?" @confirm="() => delCourseType(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
        </div>
      </template>
    </a-table>
    <div class="pagination">
      <a-pagination
          v-model="pageParam.current"
          show-size-changer
          :page-size.sync="pageParam.pageSize"
          :total="pageParam.total"
          @showSizeChange="onShowSizeChange"
          @change="onPageChange"
      />
    </div>
    <courseTypeForm ref="form" @success="refreshData"/>
  </div>
</template>
<script>
import CourseTypeForm from "@/pages/courses/type/components/CourseTypeForm";
import {editCourseType, deleteCourseType, listCourseTypeByPage} from "@/services/courseType";
const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    scopedSlots: { customRender: 'id' },
  },
  {
    title: '课程类别',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '标准班人数',
    dataIndex: 'standardNum',
    scopedSlots: { customRender: 'standardNum' },
  },
  {
    title: '最大人数',
    dataIndex: 'maxNum',
    scopedSlots: { customRender: 'maxNum' },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    scopedSlots: { customRender: 'createTime' },
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    scopedSlots: { customRender: 'updateTime' },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
]

export default {
  components: { CourseTypeForm },
  data() {
    return {
      pageParam :{
        pageSize: 10,
        current: 1,
        total: 200,
      },
      dataSource: [],
      cacheData: [],
      columns,
      editingKey: '',
    };
  },

  methods: {
    delCourseType(key){
      deleteCourseType(key).then(res => {
        if (res.data.code == 200){
          this.refreshData()
        } else {
          this.$message.error = '删除失败'
        }
      })
    },
    handleChange(value, key, column) {
      const newData = this.dataSource;
      const target = newData.find(item => key === item.id);
      if (target) {
        target[column] = value;
        this.dataSource = newData;
      }
    },
    edit(key) {
      const newData = this.dataSource;
      const target = newData.find(item => key === item.id);
      if (target) {
        this.editingKey = key;
      }
    },
    save(key) {
      const name = 'name'
      const standardNum = 'standardNum'
      const maxNum = 'maxNum'
      const newData = this.dataSource;
      const newCacheData = this.cacheData;
      const target = newData.find(item => key === item.id);
      const targetCache = newCacheData.find(item => key === item.id);
      if (target && targetCache) {
        if (target[name] != targetCache[name]
            ||target[standardNum] != targetCache[standardNum]
            ||target[maxNum] != targetCache[maxNum]){
          //发生改变，需要请求服务器持久化数据
          editCourseType(target).then(res => {
            if (res.data.code == 200){
              this.$message.success = "修改成功"
            } else {
              this.$message.error = '修改失败'
            }
          })
        }
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
    },
    cancel(key) {
      const newData = this.dataSource;
      const target = newData.find(item => key === item.id);
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.find(item => key === item.id));
        this.data = newData;
      }
    },

    deployApplication() {
      this.$refs.form.dialog = true;
    },
    refreshData() {
      this.onPageChange(this.pageParam.current, this.pageParam.pageSize )
    },

    onShowSizeChange(current, pageSize) {
      listCourseTypeByPage(current, pageSize).then(this.afterChange)
    },
    onPageChange(page, pageSize) {
      listCourseTypeByPage(page, pageSize).then(this.afterChange)
    },
    afterChange(res) {
      const changeRes = res.data
      if (changeRes.code == 200){
        const pageRes = changeRes.data
        this.pageParam.current = pageRes.current
        this.pageParam.pageSize = pageRes.size
        this.pageParam.total = pageRes.total
        this.dataSource = pageRes.records
        this.cacheData = this.dataSource.map(item => ({ ...item }));
      } else {
        this.$message.error = changeRes.message
      }
    },
  },
  created() {
    this.refreshData()
  }
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.my-btn {
  text-align: right;
  margin-right: 10px;
  margin-bottom: 10px;
}

</style>
